<template>
  <!-- 顶部栏 -->
  <div class="container">
    <!-- logo -->
    <el-link href="https://mp.weixin.qq.com/s/78ZiJKTMj3XO38S70kb3FA"
      ><img src="@/assets/logo.png" style="margin-left: 20px"
    /></el-link>
    <!-- 人物头像部分 -->
    <div class="avatar">
      <el-dropdown>
        <div class="el-dropdown-link">
          <el-avatar :src="avatarUrl">
            <!-- <i class="el-icon-arrow-down"></i> -->
          </el-avatar>
        </div>
        <!-- 要加#dropdown -->
        <template #dropdown>
          <el-dropdown-menu class="avatarFunc">
            <el-dropdown-item>
              <div>历史记录</div>
            </el-dropdown-item>
            <el-dropdown-item>
              <div>取货地址</div>
            </el-dropdown-item>
            <el-dropdown-item>
              <!-- 联系客服 -->
              <div>
                <el-button text @click="dialogVisibleService = true">
                  联系客服
                </el-button>
              </div>
            </el-dropdown-item>
            <el-dropdown-item>
              <!-- 个人信息 -->
              <div>
                <el-button text @click="dialogVisibleUser = true">
                  个人信息
                </el-button>
              </div>
            </el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
      <!-- id登录与退出登录 -->
      <span class="id">{{ "ID:" + id }}</span>
      <e-link type="primary" class="link" @click="handleLogout"
        >退出登录</e-link
      >
    </div>
  </div>

  <!-- 个人信息部分 -->
  <el-dialog
    v-model="dialogVisibleUser"
    width="32%"
    style="background-color: #a3ea9b"
  >
    <div>
      <div class="userHeader">
        <!-- avatar头像部分 -->
        <el-avatar
          ref="avatarImg"
          :size="200"
          :src="avatarUrl"
          fit="cover"
          class="userAvatar"
        ></el-avatar>

        <!-- 文字内容 -->
        <div class="userInfo">
          <h1>昵称:{{ name }}</h1>
          <h1>id:{{ id }}</h1>
        </div>
      </div>
      <div class="userFooter">
        <!-- 上传头像 -->
        <el-button class="uploadAvatar" @click="showUploadDialog"
          >上传头像</el-button
        >
        <!-- input输入 -->
        <input
          type="file"
          ref="avatarInput"
          @change="handleFileChange"
          show-file-list="false"
          style="display: none"
        />
        <el-button class="uploadAvatar" @click="showMessageBox"
          >更改昵称</el-button
        >
      </div>
    </div>
  </el-dialog>

  <!-- 联系客服部分 -->
  <el-dialog
    v-model="dialogVisibleService"
    width="32%"
    style="background-color: #ffffff"
    :title="title"
  >
    <!-- 未实现：这里显示对话 -->
    <div class="service">
      <el-input
        v-model="textarea"
        type="textarea"
        disabled
        :rows="7"
        placeholder="你好 ! 请您输入您的疑问，我们会帮助您解答！"
      />
      <div class="serviceFooter">
        <img
          src="../assets/语音.png"
          @click="handleSpeech"
          style="inline-block;margin-top:5px"
        />
        <input
          id="serviceContent"
          type="text"
          style="flex: 1; margin-left: 5px"
        />
        <el-button @click="handleContact" style="margin-left: 10px"
          >确认</el-button
        >
      </div>
    </div>
  </el-dialog>

  <!-- 取货地址 -->

  <!-- 广告栏 -->
  <div class="block text-center">
    <el-carousel height="160px">
      <el-carousel-item v-for="item in items" :key="item">
        <a :href="item.link"> <img class="pic" :src="item.url" /></a>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
import { ref } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
const input = ref("");
export default {
  name: "",
  components: {},
  data() {
    return {
      avatarUrl: require("../assets/sRecalls.png"),
      // 客服交流
      title: "客服" + "2038" + "号/农户",
      textarea: ref(""),
      //用户信息
      name: "sRecalls",
      id: "123456",
      serviceId: "2038",
      dialogVisibleUser: ref(false),
      dialogVisibleService: ref(false),
      value: ref(""),
      items: [
        {
          link: "https://mp.weixin.qq.com/s/4GOZv8wLKuQSff1s4z3sng",
          url: require("@/assets/advertisement1.png"),
        },
        {
          link: "https://mp.weixin.qq.com/s/dnFVSOivntpirpcKID4YTg",
          url: require("@/assets/advertisement2.png"),
        },
        {
          link: "https://mp.weixin.qq.com/s/V7J7MC_cFL7md5LZPyii1g",
          url: require("@/assets/advertisement3.png"),
        },
      ],
    };
  },

  created() {},
  mounted() {},
  methods: {
    logout() {
      ElMessage({
        message: "退出成功！",
        type: "success",
      });
    },
    handleLogout() {
      this.logout();
      // 假设您的登录页面 URL 为 "/login"
      location.href = "/login"; // 通过重新加载页面来返回登录页面
      // 或者使用 location.replace 方法可以不保留历史记录的方式返回登录页面
      // location.replace("/login");
    },
    showUploadDialog() {
      //绑定input表单的click事件
      this.$refs.avatarInput.click();
    },
    handleFileChange(event) {
      const file = event.target.files[0];
      const reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = () => {
        this.avatarUrl = reader.result;
      };
    },
    // 修改昵称
    showMessageBox() {
      //这里重新回来看然后总结
      ElMessageBox.prompt("请输入新的昵称", "提示", {
        inputPlaceholder: "请输入新的昵称",
        showCancelButton: true,
        cancelButtonText: "取消",
        confirmButtonText: "确认",

        inputValidator: (val) => {
          if (!val) {
            return "昵称不能为空";
          }
        },
      })
        .then(({ value }) => {
          this.name = value;
          // 提交昵称修改请求
          ElMessage({
            message: "已成功修改昵称",
            type: "success",
          });
        })
        .catch(() => {
          // 取消修改昵称
          ElMessage({
            message: "已取消修改昵称",
            type: "message",
          });
        });
    },
    // 客服交流
    handleContact() {
      this.textarea = document.getElementById("serviceContent").value;
      document.getElementById("serviceContent").value = "";
    },
    //客服交流--语音
    handleSpeech() {
      ElMessage({
        message: "抱歉！目前语音功能尚未开启！",
        type: "error",
      });
    },
  },
};
</script>

<style lang="css" scoped>
.el-dialog .el-dialog__header {
  padding: 0;
}

/* 顶部盒子 */
.container {
  display: flex;
  justify-content: space-between;
  height: 50px;
  width: 100%;
  position: fixed;
  top: 0;
  border-bottom: 1px solid rgb(0, 0, 0);
}

/* 头像部分 */
.avatar {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 50px;
  margin-right: 40px;
  color: #67b383;
  /* background-color: #409EFF; */
}

.avatarFunc div {
  color: #67b383;
  /* width: 60px; */
  font-weight: bold;
}

.id {
  margin-left: 10px;
  font-size: 25px;
  line-height: 25px;
}

.link {
  margin-left: 10px;
  font-size: 25px;
  line-height: 25px;
}

/* 弹窗部分的头像 */
.userHeader {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-top: -50px;
}

.userAvatar {
  /* display: inline-block; */
}

.userInfo h1 {
  /* margin-left: 5px; */
  /* display: inline-block; */
  font-size: 30px;
  font-weight: 100;
}

.userFooter {
  margin-top: 10px;
}

.userFooter h1 {
  border: black 1px solid;
  margin-block-start: 0em;
  margin-block-end: 0em;
  border-collapse: collapse;
  font-size: 45px;
  font-weight: 100;
  padding-left: 20px;
}

.userFooter .uploadAvatar {
  background-color: #4bbf5c;
  height: 60px;
  width: 100%;
  color: white;
  font-size: 28px;
  line-height: 60px;
  border-radius: 15px;
}

.el-dialog__body {
  padding: 0;
}

/* 下拉框 */
.el-dropdown {
  margin: 5px auto;
}

.el-dropdown-link {
  cursor: pointer;
  display: inline-block;
}

.el-icon-arrow-down {
  font-size: 12px;
}

/* 跑马灯样式 */
.pic {
  height: 160px;
  width: 100%;
}

.block {
  display: block;
  height: 160px;
  margin-top: 50px;
}

.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
  text-align: center;
  border: 2px solid rgba(0, 0, 0, 0.1);
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

/* 客服功能 */
.service {
  margin-top: -20px;
}

.serviceFooter {
  display: flex;
  /* justify-content: center; */
  justify-content: space-around;
  margin-top: 8px;
}

.serviceFooter .el-button {
  background-color: #4bbf5c;
  color: white;
}
</style>
